<template>
  <div class="tw-libnewslist"
    :class="{'xphoto' :moduleClassfiyPhotoWall, 'xnonews': moduleClassfiyOnlyTitle}">
    <!---模块照片墙定制-->
    <template v-if="moduleClassfiyPhotoWall">
      <div class="tw-libnewslist-item"
        v-for="(item, index) in moduleClassfiyPhotoWallData"
        :key="index">
        <a class="tw-libnewslist-imgbox"
          :href="item.coverHref"
          :target="item.coverTarget"
          v-if="index%2 ===0">
          <img :src="`${$twApp.gateway}/unified-portal/${item.cover}`"
            v-if="item.cover"
            alt="">
          <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
            v-else-if="imgDefault && imgDefault[0]&& imgDefault[0].localPath"
            alt="">
        </a>
        <div class="tw-libnewslist-news"
          :class="{'xodd':index%2 ===1, 'xeven':index%2 ===0}">
          <h3>{{item.classfiy}}
            <a class="
          tw-libnewslist-news-more"
              :href="item.detailHref"
              :target="item.target">
              <img v-if="moduleClassfiyPhotoWallMore && moduleClassfiyPhotoWallMore[0] &&moduleClassfiyPhotoWallMore[0].localPath"
                class="tw-libsidenav-item-icon"
                :src="`${$twApp.fileBaseUrl}${moduleClassfiyPhotoWallMore[0].localPath}`" />
              <i v-else
                class="icon iconfont xcaret">&#xe671;</i></a></h3>
          <template v-if="moduleClassfiyOnlyTitle">
          </template>
          <div v-else>
            <template v-if="item.news && item.news.length > 0">
              <div v-for="(news,newsindex) in item.news"
                :key="newsindex">
                <a :href="news.href"
                  :target="news.target"
                  class="tw-libnewslist-news-tit"> <i></i>
                  <span :title="news.title">{{news.title}}</span>
                </a>
              </div>
            </template>
            <p v-if="item.news && item.news.length===0"
              class="tw-nodata">暂无数据</p>

          </div>
        </div>
        <a class="tw-libnewslist-imgbox"
          :href="item.coverHref"
          :target="item.coverTarget"
          v-if="index%2 ===1">
          <img :src="`${$twApp.gateway}/unified-portal/${item.cover}`"
            v-if="item.cover"
            alt="">
          <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
            v-else-if="imgDefault && imgDefault[0]&& imgDefault[0].localPath"
            alt="">
        </a>
      </div>
    </template>
    <!--/模块照片墙定制-->

    <template v-else>
      <template v-if="list.length > 0">

        <!--前两个图文混排 需改变结构-->
        <template v-if="firstTwoShowImg">
          <div class="tw-libnewslist-box">
            <div class="tw-libnewslist-box-col">
              <a class="tw-libnewslist-item"
                :class="{'xfirsttwo':firstTwoShowImg}"
                @click="handleClick(list[0],$event)"
                :target="list[0].target">
                <div class="tw-libnewslist-item-img">
                  <img :src="`${$twApp.gateway}/unified-portal/${list[0].cover}`"
                    v-if="list[0].cover"
                    alt="图片">
                  <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
                    v-else-if="imgDefault && imgDefault[0]&& imgDefault[0].localPath"
                    alt="">
                </div>
                <div class="tw-libnewslist-item-tit">{{list[0].title}}</div>
              </a>
            </div>
            <div class="tw-libnewslist-box-col"
              v-if="list.length > 1">
              <a class="tw-libnewslist-item"
                :class="{'xfirsttwo':firstTwoShowImg}"
                @click="handleClick(list[1],$event)"
                :target="list[1].target">
                <div class="tw-libnewslist-item-img">
                  <img :src="`${$twApp.gateway}/unified-portal/${list[1].cover}`"
                    v-if="list[1].cover"
                    alt="图片">
                  <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
                    v-else-if="imgDefault && imgDefault[0]&& imgDefault[0].localPath"
                    alt="">
                </div>
                <div class="tw-libnewslist-item-tit">{{list[1].title}}</div>
              </a>
            </div>
          </div>
          <template v-if="list.length > 2">
            <a class="tw-libnewslist-item"
              @click="handleClick(item,$event)"
              :target="item.target"
              v-for="(item, index) in list.slice(2)"
              :key="index">
              <i class="tw-libnewslist-item-dot"
                v-if="hasBeforeDot"
                :class="{'xcircle': dotType === 'circle', 'xring': dotType === 'ring', 'xicon': dotType === 'img'}"></i>

              <span class="tw-libnewslist-item-tit"
                :class="{'xellipsis': titleEllipsis}"
                :title="item.title">{{item.title}}</span>

              <span v-if="hasClassfiy"
                class="tw-libnewslist-item-classfiy">{{item.classfiy}}</span>

              <span v-if="hasDate"
                class="tw-libnewslist-item-date">{{item.date}}</span>

            </a>
          </template>

        </template>
        <!--/前两个图文混排 需改变结构-->

        <template v-else>
          <a class="tw-libnewslist-item"
            :class="{'xfirstImage' :firstShowImg && index ===0, 'active': item.id && item.id === curNewId}"
            @click="handleClick(item, $event)"
            :target="item.target"
            v-for="(item, index) in list"
            :key="index">
            <!--第一行显示图文混排-->
            <template v-if="firstShowImg && index ===0">
              <div class="tw-libnewslist-item-img">
                <img :src="`${$twApp.gateway}/unified-portal/${item.cover}`"
                  v-if="item.cover"
                  alt="图片">
                <img :src="`${$twApp.fileBaseUrl}${imgDefault[0].localPath}`"
                  v-else-if="imgDefault && imgDefault[0]&& imgDefault[0].localPath"
                  alt="">
              </div>
              <div class="tw-libnewslist-item-cons">
                <div class="tw-libnewslist-item-tit">{{item.title}}</div>
                <div class="tw-libnewslist-item-date">{{item.date}}</div>
              </div>
            </template>
            <!--/第一行显示图文混排-->

            <!--列表形式-->
            <template v-if="(firstShowImg && index !==0) || !firstShowImg">
              <i class="tw-libnewslist-item-dot"
                v-if="hasBeforeDot"
                :class="{'xcircle': dotType === 'circle', 'xring': dotType === 'ring', 'xicon': dotType === 'img'}"></i>

              <span class="tw-libnewslist-item-tit"
                :class="{'xellipsis': titleEllipsis}"
                :title="item.title">{{item.title}}</span>

              <span v-if="hasClassfiy"
                class="tw-libnewslist-item-classfiy">{{item.classfiy}}</span>

              <span v-if="hasDate"
                class="tw-libnewslist-item-date">{{item.date}}</span>
            </template>
            <!--/列表形式-->
          </a>
        </template>
      </template>
      <tw-lib-nodata v-if="list.length===0" />
    </template>

  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import nodata from '../tw-lib-base/no-data/no-data'
import padding from '../tw-lib-base/padding/mixins'
import border from '../tw-lib-base/border/mixins'

export default {
  name: 'news-list',

  mixins: [style, nodata, padding, border],

  props,

  data() {
    return {
      curNewId: '',
      list: []
    }
  },

  computed: {
    style() {
      return Object.assign(
        {
          dotType: this.dotType,
          dotimg: this.dotimg,
          dotColor: this.dotColor,
          dotHoverColor: this.dotHoverColor,
          dotSize: this.dotSize,
          titleColor: this.titleColor,
          titleHoverColor: this.titleHoverColor,
          titleFontSize: this.titleFontSize,
          isTitleBold: this.isTitleBold,
          titleLineHeight: this.titleLineHeight,
          dateColor: this.dateColor,
          dateFontSize: this.dateFontSize,
          classfiyColor: this.classfiyColor,
          classfiyHoverColor: this.classfiyHoverColor,
          classfiyFontSize: this.classfiyFontSize,
          bgColor: this.bgColor,
          itemGap: this.itemGap,
          bgHoverColor: this.bgHoverColor,
          parentHoverColor: this.parentHoverColor,
          titleMarginLeft: this.titleMarginLeft,
          titleMarginRight: this.titleMarginRight,
          classfiyMrginRight: this.classfiyMrginRight,
          moduleClassfiyPhotoWallHoverColor: this
            .moduleClassfiyPhotoWallHoverColor,
          moduleClassfiyPhotoWallMore: this.moduleClassfiyPhotoWallMore,
          titleEllipsisLine: this.titleEllipsisLine
        },
        this.borderStyle,
        this.paddingStyle
      )
    }
  },

  methods: {
    setStyle() {
      let style = `
       ::root.tw-libnewslist  .tw-libnewslist-item{
          background: ${this.bgColor};
          padding: ${this.paddingTop} ${this.paddingRight} ${
        this.paddingBottom
      } ${this.paddingLeft};
        }

        ::root.tw-libnewslist .tw-libnewslist-item {
          margin-bottom: ${this.itemGap};
        }

         ::root.tw-libnewslist .tw-libnewslist-item-tit.xellipsis {
           -webkit-line-clamp: ${this.titleEllipsisLine};
        }

        ::root.tw-libnewslist .tw-libnewslist-item:last-child {
          margin-bottom: 0;
        }
        ::root.tw-libnewslist  .tw-libnewslist-item:hover {
           background: ${this.bgHoverColor};
        }

        ::root.tw-libnewslist  .tw-libnewslist-item-dot{
          width: ${this.dotSize};
          height: ${this.dotSize};
          color: ${this.dotColor};
        }

        ::root.tw-libnewslist .tw-libnewslist-item-dot:hover {
          color: ${this.dotHoverColor}
        }


        ::root.tw-libnewslist  .tw-libnewslist-item-tit {
          margin-left: ${this.titleMarginLeft};
          margin-right: ${this.titleMarginRight};
          color: ${this.titleColor};
          font-size: ${this.titleFontSize};
          line-height: ${this.titleLineHeight};
          font-weight: ${this.isTitleBold ? '700' : '400'}
         }

        ::root.tw-libnewslist  .tw-libnewslist-item-tit:hover {
          color: ${this.titleHoverColor}
        }

        ::root.tw-libnewslist  .tw-libnewslist-item-date {
          color: ${this.dateColor};
          font-size: ${this.dateFontSize};
         }

        ::root.tw-libnewslist  .tw-libnewslist-item-classfiy {
          margin-right: ${this.classfiyMrginRight};
          color: ${this.classfiyColor};
          font-size: ${this.classfiyFontSize};
         }

        ::root.tw-libnewslist  .tw-libnewslist-item-classfiy:hover {
          color: ${this.classfiyHoverColor};
         }
      `

      if (this.moduleClassfiyOnlyTitle) {
        style += `
          ::root.tw-libnewslist.xnonews .tw-libnewslist-item {
            width: 100%;
            height: 240px;
          }
          .tw-libnewslist.xphoto.xnonews .tw-libnewslist-imgbox {
            height: 160px;
          }
          .tw-libnewslist.xphoto.xnonews .tw-libnewslist-imgbox img {
            height: 160px;
          }
          ::root.tw-libnewslist.xphoto.xnonews .tw-libnewslist-news {
            height: 100%;
          }
          ::root.tw-libnewslist.xphoto.xnonews .tw-libnewslist-news h3 {
            font-size: 24px;
            color: #666;
          }
          ::root.tw-libnewslist.xphoto.xnonews .tw-libnewslist-news-more {
            width: 22px;
            height: 22px;
            line-height: 16px;
            border: 1px solid #ccc;
            color: #ccc;
            text-align: center;
            border-radius: 20px;
            margin-top: 7px;
          }
          ::root.tw-libnewslist.xphoto.xnonews .tw-libnewslist-news-more > i {
            font-size: 16px;
            font-weight: 400;
          }
        `
      }

      if (this.hasBeforeDot && this.dotType === 'ring') {
        style += `
          ::root.tw-libnewslist  .tw-libnewslist-item-dot {
            width: ${this.dotSize};
            height: ${this.dotSize};
            border-color: ${this.dotColor};
          }
          ::root.tw-libnewslist .tw-libnewslist-item:hover .tw-libnewslist-item-dot {
            border-color: ${this.dotHoverColor};
          }
        `
      }

      if (this.hasBeforeDot && this.dotType === 'img') {
        style += `
          ::root.tw-libnewslist  .tw-libnewslist-item-dot.xicon {
            width: ${this.dotSize};
            height: ${this.dotSize};
            background:url(${$twApp.fileBaseUrl}${
          this.dotimg[0].localPath
        }) no-repeat left center}
        `
      }

      if (this.hasBorder) {
        const border = `${this.borderSize} ${this.borderType} ${
          this.borderColor
        }`

        if (this.borderPosition.includes(0)) {
          style += `
              ::root.tw-libnewslist .tw-libnewslist-item {
                border-top: ${border};
                border-radius: ${this.borderRadius};
              }
            `
        }

        if (this.borderPosition.includes(1)) {
          style += `
              ::root.tw-libnewslist  .tw-libnewslist-item {
                border-bottom: ${border};
                border-radius: ${this.borderRadius};
              }
            `
        }

        if (this.borderPosition.includes(2)) {
          style += `
            ::root.tw-libnewslist  .tw-libnewslist-item {
                border-left: ${border};
                border-radius: ${this.borderRadius};
              }
            `
        }

        if (this.borderPosition.includes(3)) {
          style += `
            ::root.tw-libnewslist  .tw-libnewslist-item {
              border-right: ${border};
              border-radius: ${this.borderRadius};
            }
          `
        }
      }

      if (this.IsParentHoverChange) {
        style += `
          ::root.tw-libnewslist .tw-libnewslist-item:hover .tw-libnewslist-item-tit{
            color: ${this.parentHoverColor};
          }
          `
        if (this.hasBeforeDot) {
          style += `
          ::root.tw-libnewslist .tw-libnewslist-item:hover .tw-libnewslist-item-dot{
            background-color: ${this.parentHoverColor};
          } `
        }

        if (this.hasClassfiy) {
          style += `
          ::root.tw-libnewslist .tw-libnewslist-item:hover .tw-libnewslist-item-classfiy{
            color: ${this.parentHoverColor};
          } `
        }

        if (this.hasDate) {
          style += `
          ::root.tw-libnewslist .tw-libnewslist-item:hover .tw-libnewslist-item-date{
            color: ${this.parentHoverColor};
          } `
        }
      }

      if (this.moduleClassfiyPhotoWallHoverColor) {
        style += `
         ::root.tw-libnewslist.xphoto  .tw-libnewslist-news-tit:hover{
          color: ${this.moduleClassfiyPhotoWallHoverColor};
        }

        .tw-libnewslist.xphoto .tw-libnewslist-news-tit:hover i {
           background-color: ${this.moduleClassfiyPhotoWallHoverColor};
        }
        `
      }

      if (this.useHighClick) {
        style += `
          ::root.tw-libnewslist .tw-libnewslist-item.active .tw-libnewslist-item-tit{
            color: ${this.parentHoverColor};
          }
          `
        if (this.hasBeforeDot) {
          style += `
          ::root.tw-libnewslist .tw-libnewslist-item.active .tw-libnewslist-item-dot{
            background-color: ${this.parentHoverColor};
          } `
        }

        if (this.hasClassfiy) {
          style += `
          ::root.tw-libnewslist .tw-libnewslist-item.active .tw-libnewslist-item-classfiy{
            color: ${this.parentHoverColor};
          } `
        }

        if (this.hasDate) {
          style += `
          ::root.tw-libnewslist .tw-libnewslist-item.active .tw-libnewslist-item-date{
            color: ${this.parentHoverColor};
          } `
        }
      }

      this.addStyle(style)
    },

    /***
     * 点击事件
     */
    handleClick(item, event) {
      // console.log('item', item)
      if (this.hasHref && item.href) {
        event.currentTarget.setAttribute('href', item.href)
      }
      this.$emit('click', item)

      if (this.useClickData) {
        // console.log('selectData', item)
        if (this.useHighClick) {
          this.curNewId = item.id
        }
        this.$emit('input', item)
        this.$emit('change', item)
        // this.$emit('selectData', item)
      }
    },

    /***
     * 初始化数据
     */
    initData() {
      if (this.dataIsFromPortal) {
        this.getData()
      } else {
        this.list = this.lists

        if (this.useHighClick) {
          const newsid = this.getQueryVariable('newsid')
          if (newsid) {
            this.curNewId = newsid + ''
          } else {
            this.curNewId = this.list.length > 0 ? this.list[0].id : ''
          }
        }
      }
    },

    getQueryVariable(variable) {
      const href = window.location.href
      const query = href.substring(href.indexOf('?') + 1)
      const vars = query.split('&')
      for (var i = 0; i < vars.length; i++) {
        const pair = vars[i].split('=')
        if (pair[0] === variable) {
          return pair[1]
        }
      }
      return ''
    },

    /***
     * 从接口获取数据
     */
    getData() {
      if (this.dataIsFromPortal) {
        const params = {
          condition: {
            siteId: this.$siteConfig.siteId,
            // siteId: 'cF5j8CgLY3X7',
            pageId: '',
            pageIdList: [],
            status: '1'
          },
          orderList: this.sortPriority
            ? ['priority desc', 'lastModifyTime desc']
            : ['createTime desc', 'lastModifyTime asc'],
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        params.condition.pageId = this.moudleId
        if (this.moduleClassfiyOnlyTitle) {
          params.pageNo = '1'
          params.pageSize = '1'
        }
        window.axios
          .post(
            `${
              window.$twApp.gateway
            }/unified-portal/document/getDocumentListBySiteId`,
            params
          )
          .then(resp => {
            this.list = []
            if (
              resp.data.serverResult.resultCode &&
              resp.data.result &&
              resp.data.result.list
            ) {
              this.list = resp.data.result.list.map((item, idx) => {
                return {
                  documentId: item.documentId,
                  title: item.title,
                  createTime: item.createTime,
                  date: window.$ui.dateFormat(
                    item.lastModifyTime,
                    'yyyy-mm-dd'
                  ),
                  cover: item.coverIcon,
                  pageId: item.pageId,
                  publish: item.publish,
                  type: item.type,
                  status: item.status,
                  source: item.source,
                  href: item.link
                    ? item.link
                    : this.dataIsFromPortal && this.detaillUrl
                    ? `${this.detaillUrl}?pageId=${item.pageId}&documentId=${
                        item.documentId
                      }`
                    : '#',
                  target: '_blank'
                }
              })

              const total = resp.data.result.total
              this.$emit('update:total', total)
              if (total > 0 && this.useHighClick) {
                this.curNewId = this.list[0].id
              }
            } else {
            }
          })
          .catch(e => {
            this.$ui.msg({
              type: 'error',
              message: '获取列表失败'
            })
          })
      }
    }
  },

  created() {
    this.initData()
  },

  watch: {
    dataIsFromPortal: {
      deep: true,
      handler() {
        this.initData()
      }
    },

    moudleId: {
      deep: true,
      handler() {
        this.getData()
      }
    },

    pageNo: {
      deep: true,
      handler() {
        this.getData()
      }
    },

    pageSize: {
      deep: true,
      handler() {
        this.getData()
      }
    },

    lists: {
      deep: true,
      handler() {
        this.list = this.lists
        if (this.useHighClick) {
          this.curNewId = this.curNewId
            ? this.curNewId
            : this.list.length > 0
            ? this.list[0].id
            : ''
        }
      }
    }
  }
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
